<template lang="pug">
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(span="8")
          span.label-txt.w80 所属部门：
          Input(v-model="department" placeholder="请输入" clearable)
        Col.pr-20.mb-15(span="8")
          span.label-txt.w110 合同模板：
          Select(v-model="templateID" clearable filterable)
            Option(v-for="(item,index) in templateList" :value="item.id" :key="index") {{item.tName}}
        Col.pr-20.mb-15(span="8")
          span.label-txt.w110 销售产品类型：
          Select(v-model="productType" clearable)
            Option(v-for="(item,index) in productTypeList" :value="item.text" :key="index") {{item.text}}
        Col.pr-20.mb-15(span="24")
          span.label-txt.w80 合同类型：
          RadioGroup.beautiful-radio-group(type="button" v-model="contractType")
            Radio(label="标准合同") 标准合同
            Radio(label="非标准合同") 非标准合同
          Button.ml-30(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="setThead" :data="listData" @on-selection-change="tableSelectChange")
        .pr-24.pl-24(slot="header")
          .pull-right.table-title-btns
            Button.mr-15(type="info" @click="downloadFiles") 批量下载
        template(slot-scope="{ row, index }" slot="fileName")
          .u-d-info {{row.fileName}}
        template(slot-scope="{ row, index }" slot="action_2")
          Button.mr-5(type="text" size="small" @click="downloadContract(row.id)") 合同下载
          Button.mr-5(type="text" size="small" @click="downloadSelaContract(row.id)") 盖章合同下载
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
      //- div(style="margin: 10px;overflow: hidden")
      //-   div(style="float: right;")
      //-     Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
</template>

<script>
import commerceContractApi from '@/api/commerceContract.api.js'
import Mixin from '../ccMixin.js'
import theadMixin from '../theadMixin.js'
export default {
  name: 'file_cc',
  components: {
  },
  data () {
    return {
      thead: ['selection', 'contractNo', 'applyUserName', 'applyDepartment', 'applyTime', 'contractType', 'sealType', 'contractTemplate', 'productType', 'action_2'],
      listData: [],
      department: '', // 所属部门
      templateID: '', // 合同模板ID
      templateList: [], // 模板数组
      productType: '', // 销售产品类型
      contractType: '标准合同', // 合同类型
      ids: [], // 批量操作id
      loading: false,
      codeTotal: 0,
      PageIndex: 1,
      PageSize: 10
    }
  },
  mixins: [Mixin, theadMixin],
  computed: {
    setThead () {
      return this.getTableColumns(this.thead)
    }
  },
  created () {
    this.getList()
    this.getTemplateList()
  },
  methods: {
    // 获取客户列表
    getList () {
      commerceContractApi.GetContractFileList({
        Department: this.department,
        TemplateID: this.templateID,
        productType: this.productType,
        ContractType: this.contractType,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    getTemplateList () {
      commerceContractApi.GetTemplateList({
        tName: '',
        productType: '',
        PageIndex: '',
        PageSize: ''
      }).then(res => {
        if (res.data.success) {
          this.templateList = res.data.data
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 查询
    searchBtn () {
      this.PageIndex = 1
      this.getList()
    },
    tableSelectChange (val) {
      console.log(val)
      if (val.length > 0) {
        this.ids = val.map(item => {
          return item.id
        })
      } else {
        this.ids = []
      }
    },
    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.PageSize = val
      this.getList()
    },
    // 批量下载
    downloadFiles () {
      commerceContractApi.DownloadFiles(this.ids).then(res => {
        if (res.headers['content-disposition']) {
          let fileName = res.headers['content-disposition'].split('filename=')[1]
          let blob = new Blob([res.data], { type: 'application/octet-stream' })
          if ('download' in document.createElement('a')) {
            let objectUrl = URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.download = fileName
            link.href = objectUrl
            link.click()
          } else {
            navigator.msSaveBlob(blob, fileName)
          }
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
